<template>
    <div id="setting">
        <el-col :span="24" class="toolbar">
            <el-button :plain="true" type="info" @click="dDit">新增自定义设置</el-button>
        </el-col>
        <el-table :data="tableData" style="width: 100%" border>
            <el-table-column prop="id" label="id" width="120"></el-table-column>
            <el-table-column prop="title" label="标题"></el-table-column>
            <el-table-column prop="name" label="名字"></el-table-column>
            <el-table-column label="类型">
                <template slot-scope="scope">
                    <p v-if="scope.row.type === 0">系统自带</p>
                    <p v-else-if="scope.row.type === 1">用户自定义</p>
                </template>
            </el-table-column>
            <el-table-column prop="value" label="值" width="300">
                <template slot-scope="scope">
                    {{scope.row.value}}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="80">
                <template slot-scope="scope">
                    <el-button type="primary" icon="edit" size="small" @click="editDit(scope.row)"></el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--新增-->
        <el-dialog title="新增自定义设置" :visible.sync="dialogNewVisible" :before-close="dialogCan">
            <el-row class="elRow" :gutter="20" >
                <el-col class="elCol text-left" :span="4">标题</el-col>
                <el-col class="elCol" :span="20">
                    <el-input v-model="newMessages.title" placeholder="请输入标题"></el-input>
                </el-col>
            </el-row>
            <el-row class="elRow" :gutter="20" >
                <el-col class="elCol text-left" :span="4">名字</el-col>
                <el-col class="elCol" :span="20" style="text-align: left">
                    <el-input v-model="newMessages.name" placeholder="请输入标题名称"></el-input>
                </el-col>
            </el-row>
            <el-row class="elRow" :gutter="20" >
                <el-col class="elCol text-left" :span="4">值类型</el-col>
                <el-col class="elCol" :span="20" style="text-align: left">
                    <el-select v-model="newMessages.fieldType" placeholder="请选择">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
            </el-row>
            <el-row class="elRow" :gutter="20" >
                <el-col class="elCol text-left" :span="4">值</el-col>
                <el-col class="elCol" :span="20" style="text-align: left" >
                    <el-input v-model.number="newMessages.value" type="number" v-if="newMessages.fieldType === 0 " placeholder="请输入数字值"></el-input>
                    <el-input v-model="newMessages.value" v-else-if="newMessages.fieldType ===1 " placeholder="请输入值"></el-input>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addDialog">确 定</el-button>
            </span>
        </el-dialog>
        <!--编辑-->
        <el-dialog title="编辑设置" :visible.sync="dialogNewVisible1" :before-close="dialogCan">
            <el-row class="elRow" :gutter="20" >
                <el-col class="elCol text-left" :span="4">标题</el-col>
                <el-col class="elCol" :span="20">
                    <el-input v-if="editMessages.type===0" :disabled="true" v-model="editMessages.title" placeholder="请输入标题"></el-input>
                    <el-input v-else-if="editMessages.type===1" v-model="editMessages.title" placeholder="请输入标题"></el-input>
                </el-col>
            </el-row>
            <el-row class="elRow" :gutter="20" >
                <el-col class="elCol text-left" :span="4">名字</el-col>
                <el-col class="elCol" :span="20" style="text-align: left">
                    <el-input :disabled="true" v-model="editMessages.name" placeholder="请输入标题名称"></el-input>
                </el-col>
            </el-row>
            <el-row class="elRow" :gutter="20" >
                <el-col class="elCol text-left" :span="4">值类型</el-col>
                <el-col class="elCol" :span="20" style="text-align: left" >
                    <el-select v-if="editMessages.type===0"  v-model="editMessages.fieldType" placeholder="请选择" :disabled="true" >
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                    <el-select v-else-if="editMessages.type===1" v-model="editMessages.fieldType" placeholder="请选择"  @change="inputDel">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>

            </el-row>
            <el-row class="elRow" :gutter="20" >
                <el-col class="elCol text-left" :span="4">值</el-col>
                <el-col class="elCol" :span="20" style="text-align: left">
                    <el-input v-model.number="editMessages.value" type="number" v-if="editMessages.fieldType === 0 " placeholder="请输入数字值"></el-input>
                    <el-input v-model="editMessages.value" v-else-if="editMessages.fieldType ===1 " placeholder="请输入值"></el-input>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="editDialog">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    import util from '../../common/js/util';
    import {settingList,settingAdd,settingUpdate,settingFall} from '../../api/api';
    export default {
        data() {
            return {
                options: [{
                    value: 0,
                    label: '数字类型'
                }, {
                    value: 1,
                    label: '字符串类型'
                },],
                tableData: [],
                dialogNewVisible : false,
                dialogNewVisible1 : false,
                newMessages:{
                    title: '',
                    name: '',
                    type: 1,
                    value: null,
                    fieldType: 0
                },
                editMessages:{}
            }
        },
        methods: {
            postSetting(){
                let para = {};
                settingList(para).then(res => {
                    console.log(res);
                    this.tableData = res.data;
                })
            },
            upEvent(row){
                console.log(row)
            },
            checkNo(row){
                let value = row.value;
                let reg = /^[1-9]\d*$/;
                if(!new RegExp(reg).test(value)){
                    row.value = '';
                }
            },

            /*打开新增窗*/
            dDit(){
                this.dialogNewVisible = true;
                this.newMessages = {
                    title: '',
                    name: '',
                    type: 1,
                    value: '',
                    fieldType: 0
                }
            },
            dialogCan(done) {
                this.dialogNewVisible = false;
                this.dialogNewVisible1 = false;
                this.postSetting();
                done();
            },
            addDialog(){
                if (this.newMessages.title === '' || this.newMessages.name === '' || this.newMessages.value === '' ){
                    this.$message.error('请填写完成所有数据');
                    return true;
                }
                settingAdd(this.newMessages).then(res =>{
                    this.$message({message: res.message, type: 'success'});
                    this.dialogNewVisible = false;
                    this.postSetting();
                })
            },
            /*编辑*/
            editDit(row){
                console.log(row)
                this.dialogNewVisible1 = true;
                this.editMessages = row;
            },
            editDialog(){
                if (this.editMessages.title === '' || this.editMessages.name === '' || this.editMessages.value === '' ){
                    this.$message.error('请填写完成所有数据');
                    return true;
                }
                settingUpdate(this.editMessages).then(res => {
                    this.$message({message: res.message, type: 'success'});
                    this.dialogNewVisible1 = false;
                    this.postSetting();
                })
            },
            inputDel(val){
                this.editMessages.value = '';
            }
        },
        mounted(){
            this.postSetting();
        },
    }
</script>
<style type="text/scss" lang="scss" scoped>
    #setting{
        .elRow{
            .text-left{
                text-align: right;
            }
            .elCol{
                line-height: 36px;
                margin-bottom: 20px;
                :last-of-type{
                    margin-bottom: 0;
                }
                .addButton{
                    width: 100%;
                }
                .elOption{
                }
                .el-input{
                    width: 100%;
                }
            }
        }
    }
</style>